<template>
  <div class="el-h3">
    <span class="el-h3-title">
        <slot></slot>
      <span class="el-h3-title_line"></span>
    </span>
  </div>
</template>
 
<script>
export default {
  name: 'ElH3'
}
</script>
 
<style scoped>
.el-h3 {
  margin-bottom: 8px;
  padding: 5px 0;
  border-bottom: 2px solid var(--vp-c-indigo-1);
  page-break-inside: avoid;
}

.el-h3-title {
  position: relative;
  color: var(--vp-c-indigo-1);
}

.el-h3-title_line {
  position: absolute;
  left: 0;
  bottom: -15px;
  display: inline-block;
  width: 100%;
  height: 6px;
  /* background-color: seagreen; */
  background: -webkit-linear-gradient(315deg, var(--vp-c-indigo-1) 50%, var(--vp-c-indigo-1));
  
  
}

h3 {
  color: var(--vp-c-indigo-1);
  margin: 100px 0;
  display: inline;
  font-weight: bold
}

.el-h3 {
  margin: 0px 0 15px 0 !important;
}

span {
  font-size: 16px !important;
}

</style>